<template>
  <div class="routers">
    <p>路由</p>
    <br />

    <div>理由跳转:</div>
    <p>1.字符串跳转 router-link to='/link'</p>
    <router-link to="/link">链接</router-link>

    <br />
    <p>2.对象path跳转 router-link :to='{path:'/link'}'</p>
    <p>2.1对象name跳转 router-link :to='{name:'link'}'</p>

    <hr />
    <p>路由传参</p>
    <p>1.query: :to={path:'./link',query:{a:1,b:2} }</p>
    <p>2.paramas: :to={name:'link',paramas:{a:1,b:1} }</p>
    <p style="color: red">params传参需要占位且只能通过name跳转，path不能跳转</p>
    <br />
    <p>
      路由组件接受参数 可以通过 useRoute 来接受
      也可以使用路由props接受（这个更简洁）
    </p>

    <br />
    <p style="color: red">第一种写法 props：true 这种写法只能接受params传参</p>
    <p style="color: red">
      如果想用props接受query传参的话就要使用第二种函数写法 props(route){return
      route.query} 这种方法既可以获取params也可以获取query，路由组件接收的话
      就用defineProps(['a','b'])来接收
    </p>

    <br />
    <p>
      编程式导航:用useRouter实现,1.push 2.replace 不用router-link实现路由跳转
    </p>

    <div v-for="item in newsList" :key="item.id">
      <button @click="toPath(item)">{{ item.news }}</button>
    </div>
  </div>
</template>

<script setup lang="ts" name="routers">
import { reactive } from "vue";
import { useRouter } from "vue-router";

interface newsIter {
  id: number;
  news: string;
  content?: string;
}
const router = useRouter();
const newsList = reactive([
  {
    id: 1,
    news: "今天",
    // content: "今天开心吗？",
  },
  {
    id: 2,
    news: "昨天",
    content: "昨天学习了吗？",
  },
  {
    id: 3,
    news: "明天",
    content: "明天计划了吗？",
  },
]);

const toPath = (item: newsIter) => {
  router.push({
    name: "link",
    query: {
      id: item.id,
      news: item.news,
      content: item.content,
    },
  });
};
</script>

<style scoped lang="scss"></style>
